<template>
  <div class="admin-login_item8">
    <div class="tiem8-title">
      <div class="tiem8-title-tex">欢迎登录</div>
      <div class="tiem8-title-admId">账号:</div>
      <div class="item8-boxsi-butpes">
          <i class="el-icon-user"></i>
          <input class="item8-boxsi-butpes-edit" v-model="user.username" placeholder="请输入账号" />
      </div>
      <div class="tiem8-title-admId">密码:</div>
      <div class="item8-boxsi-butpes">
          <i class="el-icon-lock"></i>
          <input class="item8-boxsi-butpes-edit" v-model="user.password" type="password" placeholder="请输入密码" />
      </div>
      <!-- <div class="item8-forgt"><a class="item8-forgt-alin" href="#">忘记密码?</a></div> -->
      <div class="item8-loading">
        <el-button class="buton-action" @click="OnSubmit" :loading="loading">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
     data() {
       return {
         loading: false,
         user: {
         	username: '',
         	password: ''
         }
       }
     },
     mounted() {
     	this.init()
     },
     methods: {
       async OnSubmit() {
        this.loading = true
        await this.$ala.userLogin(this.user)
        this.loading = false
        await this.$emit('afterLogin')
       }
     }
   }
</script>

<style lang="scss">
  .admin-login_item8{
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 1300px;
    display: flex;
    flex-direction: row;
    background: url("https://diyapi.5ug.com/wwwroot/uploads/api/256-116-382/2022-02-17/620de4a5051295f55528993d.png");
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    .tiem8-title{
      top: 25%;
      left: 60%;
      min-width: 0;
      position: absolute;
    }
    .tiem8-title-tex{
      margin-left: -20px;
      border-left: 3px solid #253EEA;
      padding: 0 15px;
      font-size: 25px;
      font-weight: bold;
    }
    .tiem8-title-admId{
      color: #253EEA;
      font-weight: bold;
      padding: 20px 0;
      font-size: 17px;
    }
    .item8-boxsi-butpes{
      display: flex;
      flex-direction: row;
      width: 260px;
      height: 35px;
      border: 2px solid #CCCCCC;
      border-radius: 5px;
      margin-left: -10px;
    }
    .item8-boxsi-butpes-edit{
      outline:none;
      border-radius: 5px;
      width: 260px;
      background-color: rgba(#CCCCCC,0.2);
      font-size: 14px;
      padding: 10px 10px;
      line-height: 35px;

    }
    .el-icon-user{
      line-height: 30px;
      font-size: 25px;
      color: #C3C3C3;
      background-color: rgba(#CCCCCC,0.2);
    }
    .el-icon-lock{
      line-height: 35px;
      font-size: 25px;
      color: #C3C3C3;
      background-color: rgba(#CCCCCC,0.2);
    }
    .item8-forgt{
      padding: 20px 0;
      .item8-forgt-alin{
        font-size: 12px;
        color: #9a9a9a;
      }
      .item8-forgt-alin:hover{
        color: #3490F2;
      }
    }
    .item8-loading{
      margin-top: 30px;
      font-size: 20px;
      width: 260px;
     // margin-top: 30px;
     margin-left: -10px;
      .buton-action {
        font-size: 20px;
        background-color: #253EEA;
        color: #ffffff;
        width: 260px;
        padding: 12px 0px;
        border-radius: 5px;
      }
    }
    .item8-loading span{
      font-size: 15px;
      letter-spacing:6px
    }
  }
</style>
